<div class="main">
  <a href="#/home">home</a>
  <a href="#/detail">detail</a>
  <div id="content"><span>暂无内容</span></div>
</div>
<script>
  const routers = [{
    path: '/',
    component: `<span>暂无内容</span>`
  },
  {
    path: '/home',
    component: `<span>我是Home页面</span>`
  }, {
    path: '/detail',
    component: `<span>我是Detail页面</span>`
  }]

  function Router(routers) {
    console.log('执行')
    this.routersAction = {}
    // 初始化生成 routers
    routers.forEach((router) => {
      this.routersAction[router.path] = () => {
        document.getElementById("content").innerHTML = router.component;
      }
    })  
    this.updateView = function(e) {
      let hash = window.location.hash.slice(1) || '/'
      console.log('hash更新', hash, this.routersAction[hash])
      this.routersAction[hash] && this.routersAction[hash]()
    }
    // 路由加载触发视图更新
    window.addEventListener('load', this.updateView.bind(this))
    // 路由改变触发视图更新
    window.addEventListener('hashchange', this.updateView.bind(this))
  }
  // 实例化 hash 模式的 Router
  let router = new Router(routers) 
</script>
